<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui">

<f:view contentType="text/html">

<h:head>
	<title>Logística y Monitoreo</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<link rel="stylesheet" type="text/css" href="../css/demos.css"></link>

	<script type="text/javascript">
		// con la función ready asociada al documento nos aseguramos que el código se ejecuta cuando la página esté totalmente cargada en el cliente  
		// sustituye al atributo onload del nodo body.  
		$(document).ready(function(){
			
			//Escondo el combo de coordenadas
			$("#coodenadaDiv").css("display", "none");

			//Suscribo el evento change al combo de Modulos
			$("#form\\:tipoModuloSelect").change(function(){
				
				//si selecciona Modulo=Despacho muestro las coordenadas
                var select = $("#form\\:tipoModuloSelect option:selected").val();

				if(select == 3)
   				 $("#coodenadaDiv").css("display", "block");
   			 	else 
   				 $("#coodenadaDiv").css("display", "none");
			});
			
        });
	
	</script>
	
</h:head>

<h:body>

   <h:form id="form" >
   
   		<div id="header" class="ui-widget ui-widget-header">
			<div id="logo">
				<img src="../images/logo.png" alt="Logo" />
			</div>
		</div>
		
		<h1 class="title ui-widget-header ui-corner-all">Configuración de módulos</h1>
	
	   	<p:growl id="messages" showDetail="true"/>  
    
		<p:panel id="panel" header="Crear un nuevo módulo">  
				<table>
					<tr>
						<td>
							<h:outputText value="Tipo de módulo:"></h:outputText>
							<h:selectOneMenu id="tipoModuloSelect" value="#{configurarModuloBean.tipoModulo}"
								required="true" requiredMessage="Debe seleccionar un tipo de módulo">
								<f:selectItem id="siTipoModulo" itemValue="" itemLabel="Seleccionar" />
								<f:selectItems id="siTipoModulos" value="#{configurarModuloBean.tipoModulos}" />
							</h:selectOneMenu>
						</td>
						<td>
							<h:outputText for="idModulo" value="Id Módulo:"></h:outputText>
							<p:inputText id="idModulo" value="#{configurarModuloBean.idModulo}" size="30"  
									required="true" requiredMessage="Debe indicar un id para el módulo">
								<f:validateLength minimum="1" />
							</p:inputText>
						</td>
						<td>
							<h:outputText for="ip" value="IP:"></h:outputText>
							<p:inputText id="ip" value="#{configurarModuloBean.ip}" size="16"
								required="true" requiredMessage="Debe indicar una IP válida">
								<f:validateLength minimum="1" />
							</p:inputText>
						</td>
						<td>
							<div id="coodenadaDiv">
								<h:outputText id="coodenadaLabel" value="Coodenadas Despacho:"></h:outputText>
								<h:selectOneMenu id="coordenadaSelect" value="#{configurarModuloBean.coordenada}" >
									<f:selectItem id="siCoordenada" itemValue="0" itemLabel="Seleccionar" />
									<f:selectItems id="siCoordenadas" value="#{configurarModuloBean.coordenadas}" />
								</h:selectOneMenu>
							</div>
						</td>
				</tr>
			</table>
		 
			 <p:commandButton value="Agregar" update="display,:form:messages, panel"  id="ajax"  
			 	actionListener="#{configurarModuloBean.agregar}" styleClass="ui-priority-primary"/> 
			 	

		</p:panel>	
		
		<br></br>
	    
	    <p:outputPanel id="display"> 
	    
		<p:dataTable var="modulo" value="#{configurarModuloBean.modulos}" id="moduloList" editable="true">
 
	 		<p:ajax event="rowEdit" listener="#{configurarModuloBean.onEdit}" update=":form:messages, :form:moduloList" />  
        	<p:ajax event="rowEditCancel" listener="#{configurarModuloBean.onCancel}" update=":form:messages" /> 
        	  
	  			<p:column>  
	                <f:facet name="header">  
	                    <h:outputText value="Tipo Modulo" />  
	                </f:facet>  
	                <h:outputText value="#{modulo.tipoModulo}" />  
	            </p:column>
	            
	           <p:column>  
	                <f:facet name="header">  
	                    <h:outputText value="Id Modulo" />  
	                </f:facet>  
	                <h:outputText value="#{modulo.idModulo}" />  
	            </p:column>  
	            
	            <p:column>  
	                <f:facet name="header">  
	                    <h:outputText value="IP" />  
	                </f:facet>  
	                <h:outputText value="#{modulo.ip}" />  
	            </p:column>
	            
	            <p:column style="text-align: center; width:300px">  
	                <f:facet name="header">  
	                    <h:outputText value="Coordenadas" />  
	                </f:facet>  
	                <h:outputText value="#{modulo.coordenada}" />  
	            </p:column>  
	            
	            <p:column headerText="Estado" style="text-align: center; width:130px">  
		            <p:cellEditor>  
		                <f:facet name="output"><h:outputText value="#{modulo.estado}" /></f:facet>  
		                <f:facet name="input">  
		                    <h:selectOneMenu value="#{modulo.estado}" style="width:100%">  
		                        <f:selectItems value="#{configurarModuloBean.estados}" var="estado" itemLabel="#{estado}" itemValue="#{estado}" />  
		                    </h:selectOneMenu>  
		                </f:facet>  
		            </p:cellEditor>  
	       		</p:column>  
  
		        <p:column style="width:6%">  
		            <p:rowEditor />  
		        </p:column>  
	            
	         	  
	        </p:dataTable>  
 		</p:outputPanel>
	
		<br></br>
		
		<h:panelGrid columns="1" style="width:100%; text-align: right">
			<p:commandButton id="iniciar" action="#{configurarModuloBean.iniciar}" value="Iniciar" process="@this"></p:commandButton>
		</h:panelGrid>
	    
	      	
	        
	

	</h:form>

</h:body>

</f:view>   
</html>
   